/*
 * @Author: wangzhongjie
 * @Date: 2020-02-24 13:52:02
 * @LastEditors: wangzhongjie
 * @LastEditTime: 2020-03-10 16:40:13
 * @Description:汪中杰
 * @Email: UvDream@163.com
 */
// import react, react-markdown-editor-lite, and a markdown parser you like
import React from "react";
import MdEditor from "react-markdown-editor-lite";
import MarkdownIt from "markdown-it";
import emoji from "markdown-it-emoji";
import subscript from "markdown-it-sub";
import superscript from "markdown-it-sup";
import footnote from "markdown-it-footnote";
import deflist from "markdown-it-deflist";
import abbreviation from "markdown-it-abbr";
import insert from "markdown-it-ins";
import mark from "markdown-it-mark";
import tasklists from "markdown-it-task-lists";
import hljs from "highlight.js";
import { imgUrl } from "../../config/env";
import other from "../../api/other/index";
import "highlight.js/styles/atom-one-light.css";
import "./index.less";
import "react-markdown-editor-lite/lib/index.css";

export default class MarkDownEdit extends React.Component {
  mdEditor = null;
  mdParser = null;
  constructor(props) {
    super(props);
    this.state = {
      content: "初始化内容"
    };

    // 编辑器配置
    this.mdParser = new MarkdownIt({
      html: true,
      linkify: true,
      typographer: true,
      highlight: function(code) {
        return hljs.highlightAuto(code).value;
      }
    })
      .use(emoji)
      .use(subscript)
      .use(superscript)
      .use(footnote)
      .use(deflist)
      .use(abbreviation)
      .use(insert)
      .use(mark)
      .use(tasklists, { enabled: this.taskLists });
  }
  componentWillReceiveProps(val) {
    if (val.mdContent !== this.state.content) {
      this.setState({
        content: val.mdContent
      });
    }
  }
  componentDidUpdate(prevProps) {
    if (prevProps.mdContent !== this.state.content) {
      // this.setState({
      //   content: prevProps.mdContent
      // });
    }
  }

  handleEditorChange = data => {
    console.log("获取内容", data);
    this.setState({
      content: data.text
    });
    this.props.callback(data.html, data.text);
  };

  // 文件上传
  handleImageUpload(file, callback) {
    const reader = new FileReader();
    reader.onload = () => {
      let param = new FormData();
      param.append("file", file);
      other.images(param).then(res => {
        console.log("上传结果", res);
        if (res.code === 200) {
          let url = imgUrl + res.data;
          callback(url);
        }
      });
    };
    reader.readAsDataURL(file);
  }
  renderHTML = text => {
    return this.mdParser.render(text);
  };

  render() {
    return (
      <div style={{ marginTop: "10px" }}>
        <section>
          <MdEditor
            ref={node => (this.mdEditor = node)}
            value={this.state.content}
            style={{ height: "80vh" }}
            renderHTML={this.renderHTML}
            config={{
              view: {
                menu: true,
                md: true,
                html: true
              },
              imageUrl: "https://octodex.github.com/images/minion.png"
            }}
            onChange={this.handleEditorChange}
            onImageUpload={this.handleImageUpload}
          />
        </section>
      </div>
    );
  }
}
